<template>
    <div class="info-search">
        <div class="info-search-input">
            <input type="text" name="search" class="input-control" @focus="focusHandle" @blur="blurHandle" placeholder="搜索"/>
            <img src="@/assets/searchicon.png" class="input-icon" v-if="searchHide"/>
        </div>
    </div>
</template>
<script>
export default {
  name: 'Info-Search',
  data () {
    return {
      searchHide: true
    }
  },
  methods: {
    focusHandle: function () {
      this.searchHide = false
    },
    blurHandle: function () {
      this.searchHide = true
    }
  }
}
</script>

<style scoped lang="stylus">
  .info-search
    position:relative
    top:2.282667rem
    left:0
    height:1.536rem
    padding:.469333rem
    padding-bottom:0
    .info-search-input
      height:100%
      width:100%
      position:relative
      padding:0 .64rem
      box-sizing:border-box
      border-radius:7px
      background:white
      .input-control
        border:none
        background:none
        outline:none
        padding:0
        text-align:center
        width:100%
        height:100%
        font-size:14px
      .input-control::-webkit-input-placeholder, textarea::-webkit-input-placeholder
        color: #9e9e9e
      .input-control:-moz-placeholder, textarea:-moz-placeholder
        color: #9e9e9e
      .input-control::-moz-placeholder, textarea::-moz-placeholder
        color: #9e9e9e
      .input-control:-ms-input-placeholder, textarea:-ms-input-placeholder
        color: #9e9e9e
      .input-icon
        width:.618667rem
        height:.618667rem
        position:absolute
        left:55%
        top:.469333rem
</style>
